<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.div{
			width: 1500px;
			height: 1500px;
			border: 0px solid;
		}
		</style>	
	</head>
	<body background="../img/a.jpg">
		<div>
		<canvas id="myCanvas" width="1500" height="1500"></canvas>
		</div>
		<script type="text/javascript">
		
	
		var canvas = document.getElementById("myCanvas");
			//创建画笔
		var ctx = canvas.getContext("2d");
		var rot=0;	
		var l= 200;
 		var t= 200;
		var lrot=20;
		var trot=20;
		var y=Math.sin(rot/180*Math.PI)*100;
		var x=Math.cos(rot/180*Math.PI)*100;
		
		setInterval(function(){
		ctx.clearRect(0, 0, 1500, 1500);
 		ctx.beginPath();
		ctx.arc(l,t,100,rot/180*Math.PI,(rot/180+1)*Math.PI);
		ctx.fillStyle="white";
		ctx.fill();
		
		
		ctx.beginPath();
		ctx.arc(l,t,100,rot/180*Math.PI,(rot/180+1)*Math.PI,true);
		ctx.fillStyle="black";
		ctx.fill();
		
		var y=Math.sin(rot/180*Math.PI)*50;
		var x=Math.cos(rot/180*Math.PI)*50;
		ctx.beginPath();
		ctx.arc(l-x,t-y,50,0,2*Math.PI);
		ctx.fillStyle="white";
		ctx.fill();
		
		ctx.beginPath();
		ctx.arc(l+x,t+y,50,0,2*Math.PI);
		ctx.fillStyle="black";
		ctx.fill();
		
		ctx.beginPath();
		ctx.arc(l-x,t-y,15,0,2*Math.PI);
		ctx.fillStyle="black";
		ctx.fill();
		
		ctx.beginPath();
		ctx.arc(l+x,t+y,15,0,2*Math.PI);
		ctx.fillStyle="white";
		ctx.fill();		
			if(l>=800){
				lrot=-30;
			}
			if(l<=0){
				lrot=30;
			}
			if(t>=500){
				trot=-30;
			}
			if(t<=0){
				trot=30;
			}
		l=l+lrot;
		t=t+trot;	
		rot=rot+30;},100);
		
		</script>
	</body>
</html>
